<template>
  <SysSearch v-model:search="search" @toSearch="getList">
    <a-form-item label="任务名称" name="path"
      ><a-input placeholder="请输入任务名称" v-model:value="search.keyword"
    /></a-form-item>
  </SysSearch>
  <SysTableTemplate>
    <template #header>
      <a-button type="primary" @click="addCron">添加任务</a-button>
      <a-button type="primary" @click="reloadCron">重载任务</a-button>
    </template>
    <SysTable
      rowKey="ID"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      ref="tableRef"
      :search-data="search"
      v-model:dataSource="dataSource"
      :getList="listApi"
      :columns="columns"
    >
      <template #tableSlot="{ column, record }">
        <template v-if="column.slotName == 'icon'">
          <component :is="record.meta.icon"></component>
        </template>
        <template v-if="column.slotName == 'edit'">
          <div class="w-[300px]">
            <a-button type="link" @click="toEdit(record.ID)"
              ><template #icon> <EditOutlined /> </template>编辑</a-button
            >
            <SysRemoveBtn></SysRemoveBtn>
          </div>
        </template>
      </template>
    </SysTable>
  </SysTableTemplate>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import SysSearch from '@/components/sysSearch/index.vue';
import { listApi, createApi, deleteApi, listByIdApi, updateApi, updateStatusApi, reloadApi } from '@/api/modules/cron';
import { CronInfoType } from '@/types/cron';
import SysTableTemplate from '@/components/sysTableTemplate/index.vue';
import { message } from 'ant-design-vue';
// ======== 搜索 ========
const search = reactive({
  keyword: '',
});
// ============= 列表接口数据 =============
const dataSource = ref<CronInfoType[]>([]);
const tableRef = ref();
// 手动请求
function getList() {
  tableRef.value.toGetList();
}
const columns = [
  {
    title: '任务名称',
    dataIndex: 'task_name',
  },
  {
    title: '任务状态',
    dataIndex: 'task_status',
    customRender: ({ text }: { text: string }) => {
      return text === 'pending' ? '未执行' : text === 'running' ? '执行中' : text === 'success' ? '已成功' : '已失败';
    },
  },
  {
    title: '上次执行时间',
    dataIndex: 'last_execute_time',
  },
  {
    title: '任务类型',
    dataIndex: 'task_type',
    customRender: ({ text }: { text: string }) => {
      return text === '0'
        ? '定时循环'
        : text === '1'
        ? '一次性任务'
        : text === '2'
        ? '一次性任务延迟执行'
        : '一次性任务指定时间运行';
    },
  },
  {
    title: '执行条件',
    dataIndex: 'time_schedule',
  },
  {
    title: '唯一标识',
    dataIndex: 'unique_id',
  },
  {
    title: '重试次数',
    dataIndex: 'retry_count',
  },
  {
    title: '最大重试次数',
    dataIndex: 'max_retry',
  },
  {
    title: '是否完成',
    dataIndex: 'is_ok',
    customRender: ({ text }: { text: boolean }) => {
      return text ? '是' : '否';
    },
  },
  {
    title: '创建时间',
    dataIndex: 'CreatedAt',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];
const selectedRowKeys = ref<string[]>([]);
const onSelectChange = (_selectedRowKeys: string[]) => {
  selectedRowKeys.value = _selectedRowKeys;
};
// ============= 编辑 =============
const toEdit = () => {};

// ============= 删除 =============

// ============= 添加 =============
const addCron = () => {
  console.log("co'r'ncorn");
};
// ============= 其他 =============
//重载任务
const reloadCron = () => {
  reloadApi().then(res => {
    message.success(res);
  });
};
</script>
